/* 建议容器 */
.container {
  @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden z-50;
  max-height: 400px;
  min-width: 300px;
}

.container--bottom {
  @apply rounded-t-none border-t-0;
}

.container--top {
  @apply rounded-b-none border-b-0;
}

/* 加载状态 */
.loading {
  @apply flex items-center justify-center p-4 text-gray-500 dark:text-gray-400;
}

.loadingSpinner {
  @apply w-4 h-4 border-2 border-gray-300 border-t-primary-500 rounded-full animate-spin mr-2;
}

.loadingText {
  @apply text-sm;
}

/* 建议列表 */
.list {
  @apply max-h-80 overflow-y-auto;
  scrollbar-width: thin;
  scrollbar-color: theme('colors.gray.300') transparent;
}

.list::-webkit-scrollbar {
  width: 6px;
}

.list::-webkit-scrollbar-track {
  @apply bg-transparent;
}

.list::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

.list::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

/* 建议项 */
.item {
  @apply flex items-center px-4 py-3 cursor-pointer transition-colors duration-150 border-b border-gray-100 dark:border-gray-700 last:border-b-0;
}

.item:hover {
  @apply bg-gray-50 dark:bg-gray-700;
}

.item--selected {
  @apply bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300;
}

.item--trending {
  @apply relative;
}

.item--trending::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-red-500 to-orange-500;
}

.item--history {
  @apply relative;
}

.item--history::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-1 bg-gray-300 dark:bg-gray-600;
}

/* 图标包装器 */
.iconWrapper {
  @apply flex items-center justify-center w-5 h-5 mr-3 text-gray-400 dark:text-gray-500;
}

.item--selected .iconWrapper {
  @apply text-primary-600 dark:text-primary-400;
}

.icon {
  @apply w-4 h-4;
}

/* 内容区域 */
.content {
  @apply flex-1 min-w-0;
}

.text {
  @apply text-sm text-gray-900 dark:text-gray-100 truncate;
  line-height: 1.4;
}

.item--selected .text {
  @apply text-primary-700 dark:text-primary-300;
}

/* 高亮文本 */
.highlight {
  @apply bg-yellow-200 dark:bg-yellow-800 text-gray-900 dark:text-gray-100 px-0.5 rounded;
  background-color: rgba(255, 235, 59, 0.3);
}

.item--selected .highlight {
  @apply bg-primary-200 dark:bg-primary-800 text-primary-900 dark:text-primary-100;
}

/* 元数据 */
.metadata {
  @apply flex items-center gap-2 mt-1 text-xs text-gray-500 dark:text-gray-400;
}

.category {
  @apply bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full;
}

.resultCount {
  @apply opacity-75;
}

.popularity {
  @apply flex items-center gap-1 text-orange-600 dark:text-orange-400;
}

.trendIcon {
  @apply w-3 h-3;
}

/* 操作区域 */
.actions {
  @apply flex items-center ml-2;
}

.frequency {
  @apply text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full;
}

.item--selected .frequency {
  @apply bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-400;
}

/* 底部提示 */
.footer {
  @apply px-4 py-2 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600;
}

.tip {
  @apply text-xs text-gray-500 dark:text-gray-400;
}

/* 动画效果 */
.container {
  animation: slideDown 0.2s ease-out;
}

.container--top {
  animation: slideUp 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 640px) {
  .container {
    min-width: auto;
    max-height: 300px;
  }
  
  .item {
    @apply px-3 py-2;
  }
  
  .text {
    @apply text-xs;
  }
  
  .metadata {
    @apply text-xs gap-1;
  }
  
  .frequency {
    @apply text-xs px-1.5 py-0.5;
  }
  
  .footer {
    @apply px-3 py-1.5;
  }
  
  .tip {
    @apply text-xs;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .item {
    @apply border-b-2;
  }
  
  .item--selected {
    @apply bg-primary-100 dark:bg-primary-800 border-primary-500;
  }
  
  .highlight {
    @apply bg-yellow-300 dark:bg-yellow-700 text-black dark:text-white;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .container {
    animation: none;
  }
  
  .item {
    @apply transition-none;
  }
  
  .loadingSpinner {
    @apply animate-none;
  }
}

/* 无障碍支持 */
.item:focus {
  @apply outline-none ring-2 ring-primary-500 ring-inset;
}

.item[aria-selected="true"] {
  @apply bg-primary-50 dark:bg-primary-900/20;
}

/* 空状态 */
.empty {
  @apply flex flex-col items-center justify-center p-8 text-gray-500 dark:text-gray-400;
}

.emptyIcon {
  @apply w-12 h-12 mb-2 opacity-50;
}

.emptyText {
  @apply text-sm text-center;
}

/* 分组标题 */
.groupTitle {
  @apply px-4 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600;
}

/* 建议项类型指示器 */
.typeIndicator {
  @apply absolute top-2 right-2 w-2 h-2 rounded-full;
}

.typeIndicator--history {
  @apply bg-gray-400;
}

.typeIndicator--trending {
  @apply bg-red-500;
}

.typeIndicator--suggestion {
  @apply bg-blue-500;
}
